<template>
  <div>
    <span class="titleStr">供应商基本信息</span>
    <el-progress :percentage="100"  :show-text="false"></el-progress><!--:format="format"-->
    <span class="describe">由《供应商注册》通过子流程自动发起</span>
    <p></p>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="grid-content bg-purple">供应商编码</div>
        <el-input placeholder="暂无内容" disabled></el-input>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">供应商名称</div>
        <el-input placeholder="暂无内容" disabled></el-input>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">供应商准入编码</div>
        <el-input placeholder="自动生成无需填写" disabled></el-input>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">申请准入时间</div>
        <el-date-picker
            v-model="value1"
            type="datetime"
            placeholder="选择日期时间">
        </el-date-picker>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="grid-content bg-purple">供应商基本信息</div>
      </el-col>
      <el-table
          :data="tableData"
          style="width: 100%"
          :default-sort="{prop: 'date', order: 'descending'}"
      >
        <el-table-column
            prop="date"
            label="供应商编码"
            sortable
            width="180">
        </el-table-column>
        <el-table-column
            prop="name"
            label="供应商名称"
            sortable
            width="180">
        </el-table-column>
        <el-table-column
            prop="name"
            label="供应商分类"
            sortable
            width="180">
        </el-table-column>
        <el-table-column
            prop="name"
            label="供应商状态"
            sortable
            width="180">
        </el-table-column>
        <el-table-column
            prop="address"
            label="地址"
            :formatter="formatter">
        </el-table-column>
      </el-table>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="grid-content bg-purple">供应商财务信息</div>
      </el-col>
      <el-table
          :data="tableData"
          style="width: 100%"
          :default-sort="{prop: 'date', order: 'descending'}"
      >
        <el-table-column
            prop="date"
            label="发票抬头"
            sortable
            width="180">
        </el-table-column>
        <el-table-column
            prop="name"
            label="发票税号"
            sortable
            width="180">
        </el-table-column>
        <el-table-column
            prop="name"
            label="税种"
            sortable
            width="180">
        </el-table-column>
        <el-table-column
            prop="name"
            label="增值税税率%"
            sortable
            width="180">
        </el-table-column>
        <el-table-column
            prop="name"
            label="开户银行"
            sortable
            width="180">
        </el-table-column>
        <el-table-column
            prop="name"
            label="银行账户"
            sortable
            width="180">
        </el-table-column>

      </el-table>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="grid-content bg-purple">供应商联系人信息</div>
      </el-col>
      <el-table
          :data="tableData"
          style="width: 100%"
          :default-sort="{prop: 'date', order: 'descending'}"
      >
        <el-table-column
            prop="date"
            label="姓名"
            sortable
            width="180">
        </el-table-column>
        <el-table-column
            prop="name"
            label="职位"
            sortable
            width="180">
        </el-table-column>
        <el-table-column
            prop="name"
            label="电话"
            sortable
            width="180">
        </el-table-column>
        <el-table-column
            prop="name"
            label="邮箱"
            sortable
            width="180">
        </el-table-column>
      </el-table>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="grid-content bg-purple">供应商资质信息</div>
      </el-col>
      <el-table
          :data="tableData"
          style="width: 100%"
          :default-sort="{prop: 'date', order: 'descending'}"
      >
        <el-table-column
            prop="date"
            label="姓名"
            sortable
            width="180">
        </el-table-column>
        <el-table-column
            prop="name"
            label="职位"
            sortable
            width="180">
        </el-table-column>
        <el-table-column
            prop="name"
            label="电话"
            sortable
            width="180">
        </el-table-column>
        <el-table-column
            prop="name"
            label="邮箱"
            sortable
            width="180">
        </el-table-column>
      </el-table>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="grid-content bg-purple">供应商资质信息</div>
      </el-col>
      <el-table
          :data="tableData"
          :span-method="0"
          border
          style="width: 100%">
        <el-table-column
            prop="id"
            label="ID"
            width="180">
        </el-table-column>
        <el-table-column
            prop="name"
            label="资质/证书名称">
        </el-table-column>
        <el-table-column
            prop="amount1"
            sortable
            label="证书类别">
        </el-table-column>
        <el-table-column
            prop="amount2"
            sortable
            label="资质/证书附件">
        </el-table-column>

      </el-table>
    </el-row>

  </div>
</template>

<script>
export default {
  name: "supplierEnterRuleBaseView",

  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }]
    };
  },
  methods: {
    formatter(row, column) {
      return row.address;
    }
  }

}
</script>

<style scoped>
.titleStr {
  line-height: 30px;
  color: #409EFF;
}

.describe {
  font-size: 14px;

}
</style>